<template>
    <div>
        <el-dialog title="请输入修改信息" v-model="UserStore.$state.Updata_state">
            <el-form :model="upData">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_phone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_sex" autocomplete="off" />
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_Id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_email" autocomplete="off" type="email" />
                </el-form-item>
                <el-form-item label="乘客类型" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_type" autocomplete="off" />
                </el-form-item>
                <el-form-item label="住址" :label-width="formLabelWidth">
                    <el-input v-model="upData.Up_address" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog(0)">取消</el-button>
                    <el-button type="primary" @click="closeDialog(1)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useUserStore } from "../store/UserStore";
import { storeToRefs } from "pinia";
import { ElMessage } from 'element-plus'

import Link from "../api/Link.js";
import apiurl from "../api/url.js";

const formLabelWidth = '140px'
const UserStore = useUserStore();
let { Updata_state } = storeToRefs(UserStore)


let upData = reactive({
    Up_name: UserStore.username,
    Up_phone: UserStore.userphone,
    Up_sex: UserStore.usersex,
    Up_Id: UserStore.userId,
    Up_email: UserStore.useremail,
    Up_type: UserStore.usertype,
    Up_address: UserStore.useraddress,
})


let closeDialog = async (numb: number) => {
    if (numb == 1) {
        let data = {
            id: UserStore.id,
            username: upData.Up_name,
            phone: upData.Up_phone,
            sex: upData.Up_sex,
            numberId: upData.Up_Id,
            email: upData.Up_email,
            type: upData.Up_type,
            address: upData.Up_address
        }
        await Link(apiurl.update, "POST", data)
            .then((ok: any) => {
                console.log("修改返回参数", ok)
                ElMessage({
                    message: '个人信息修改成功！',
                    type: 'success',
                })
                const message = document.querySelector('.el-message__content')?.parentNode
                //判断提示框的数量   
                if (document.getElementsByClassName('el-message__content').length > 1) {
                    setTimeout(function () {
                        message.parentNode.removeChild(message);
                    }, 100)
                }
                //清空本地存储信息
                // sessionStorage.removeItem("UserStore")
            })
        console.log({ id: UserStore.id });

        await Link(apiurl.userGet, "GET", {}, { id: UserStore.id })
            .then((ok: any) => {
                console.log("修改后的数据", ok)
                // 更新修改信息
                UserStore.Save_data(ok)
            })

        //关闭修改框
        Updata_state.value = !Updata_state.value
    } else {
        Updata_state.value = !Updata_state.value
    }
}


// let dianji = () =>{
//     console.log(UserStore.$state.username); 
// }
</script>

<style lang='scss'>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>